<template>
    <div>
        role_id: <el-input v-model="roleId" style="width: 200px; margin-right: 20px;"></el-input>
        <el-button @click="addNewCmd">新增指令</el-button><br><br>
        <el-card v-for="item in data" style="margin: 5px; width: 100%; ">
            <div style="display: flex; width: 100%; align-items: center;">
                <el-select v-model="item.type" style="width: 100px; margin-right: 20px;">
                    <el-option
                        v-for="selectItem in selectTypes"
                        :key="selectItem.value"
                        :label="selectItem.text"
                        :value="selectItem.value"
                    >
                    </el-option>
                </el-select>
                <span v-if="item.type == INSTRUCT_TYPE_NONE">
                    PLEASE SELECT INSTRUCT MOD
                </span>
                <span v-else-if="item.type == INSTRUCT_TYPE_GM">
                    DESC:  <el-input style="display: inline-block; margin-right: 10px; width: 100px;" v-model="item.desc"></el-input>
                    指令: <el-input style="display: inline; margin-left: 20px" placeholder="充值 101" v-model="item.data"></el-input>
                </span>
                <span v-else-if="(item.type == INSTRUCT_TYPE_RMFA) || (item.type == INSTRUCT_TYPE_MFA)">
                    DESC:  <el-input style="display: inline-block; margin-right: 10px; width: 100px;" v-model="item.desc"></el-input>
                    MOD:  <el-input style="display: inline-block; margin-right: 10px; width: 150px;" v-model="item.mod"></el-input>
                    FUN:  <el-input style="display: inline-block; margin-right: 10px; width: 150px;" v-model="item.fun"></el-input>
                    Args: <el-input style="display: inline-block; margin-right: 10px; width: 150px;" v-model="item.args"></el-input>
                </span>
                <span v-else-if="item.type == INSTRUCT_TYPE_PROTO">
                    DESC:  <el-input style="display: inline-block; margin-right: 10px; width: 100px;" v-model="item.desc"></el-input>
                    协议内容: <el-input
                                style="display: inline-block; margin-left: 20px; width: 150px;"
                                placeholder="{36200}" v-model="item.data"
                            ></el-input>
                </span>
                <el-button @click="exec(item)" style="margin-left: auto;">执行</el-button>
                <el-button @click="delInstrust(item.id)" style="margin-right: 10px;">删除</el-button>
            </div>

        </el-card>

    </div>
</template>

<script setup lang="ts">
import { Axios } from 'axios';
import { url } from 'inspector';
import { inject, onMounted, Ref, ref } from 'vue';
import { onBeforeRouteLeave } from 'vue-router';

// -------------- defined --------------
const INSTRUCT_TYPE_NONE = 0;
const INSTRUCT_TYPE_GM = 1;
const INSTRUCT_TYPE_RMFA = 2;
const INSTRUCT_TYPE_MFA = 3;
const INSTRUCT_TYPE_PROTO = 4;
interface InstructData {
    type: number,
    id: number
    data: string,
    mod: string,
    fun: string,
    args: string,
    desc: string,
    role_id: string
}

// -------------- const var ------------------

const selectTypes = ref([
    { value: INSTRUCT_TYPE_NONE, text: "NONE" },
    { value: INSTRUCT_TYPE_GM, text: "GM" },
    { value: INSTRUCT_TYPE_RMFA, text: "RMFA" },
    { value: INSTRUCT_TYPE_MFA, text: "MFA" },
    { value: INSTRUCT_TYPE_PROTO, text: "PROTO" }
])
const data: Ref<Array<InstructData>> = ref([])
const http = inject<Axios>('http');
const LOCAL_CACHE_KEY = "LOCAL_CACHE_KEY_RExec"

// ---------------- let var ----------------
let dataKeyCount = ref(1)
let roleId = ref("");
// --------------- func ----------------
function addNewCmd() {
    data.value.push(newInstuctData())
}

function newInstuctData() {
    return {
        type: INSTRUCT_TYPE_NONE,
        id: (++dataKeyCount.value),
        data: "",
        mod: "",
        fun: "",
        args: "",
        desc: "",
        role_id: ""
    }
}

function exec(postData: InstructData) {
    if (postData.type == INSTRUCT_TYPE_NONE) return
    const secName = selectTypes.value.find(obj => obj.value == postData.type)?.text.toLowerCase()
    postData.role_id = roleId.value.trim()
    const jPostData = JSON.stringify(postData)
    if (secName == undefined) return
    http?.post(
        `http://localhost:8099/role/${secName}`, jPostData
    )
}

onMounted(() => {
    localLoad()
    window.addEventListener('beforeunload', function (_event) {
        localSave()
    })
})

// 路由离开时自动保存数据，防止通过菜单切换丢失
onBeforeRouteLeave(() => {
    localSave()
})

function delInstrust(key: number) {
    data.value = data.value.filter(obj => obj.id !== key);
}

function localSave() {
    const saveData = {data: data.value, count: dataKeyCount.value, role_id: roleId.value}
    window.localStorage.setItem(LOCAL_CACHE_KEY, JSON.stringify(saveData))
}

function localLoad() {
    const loadDataStr: string | null = window.localStorage.getItem(LOCAL_CACHE_KEY)
    if (loadDataStr == null) return
    const loadData = JSON.parse(loadDataStr)
    data.value = loadData.data
    dataKeyCount.value = loadData.count
    roleId.value = loadData.role_id
}

</script>
